<template>
  <div class="relation">
    <p class="tips">
      <i class="el-icon-info"></i>用户关联永久有效，新客购买后即可获得佣金；
    </p>
    <div class="search">
      <div class="put">
          <el-input v-model="form.aphone" placeholder="请输入推荐人电话"></el-input>
      </div>
      <div class="put" style="margin-left:30px">
          <el-input v-model="form.bphone" placeholder="请输入被推荐人电话"></el-input>
      </div>
      <div>
        <el-select v-model="value" placeholder="请是否成交" style="margin-left:30px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
        <el-button type="primary" class="searchBtn" @click="search()">搜索</el-button>
        <el-button type="primary" @click="reset()">清空搜索</el-button>
    </div>
    <div class="nums">
      <div class="recommend">
        <p>
          当前推荐客户数：
          <em>{{clientSum}}</em> 人
        </p>
      </div>
      <div class="buy">
        <p>
          当前已购买人数：
          <em>{{clientSucces}}</em> 人
        </p>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%" >
        <el-table-column prop="companyName" label="公司" width="100"></el-table-column>
        <el-table-column prop="realname" label="客户名称" width="80"></el-table-column>
        <el-table-column prop="aphone" label="推荐人电话" width="120"></el-table-column>
        <el-table-column prop="bphone" label="被推荐人电话" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="100"></el-table-column>
        <el-table-column prop="product" label="产品" width="50"></el-table-column>
        <el-table-column prop="status" label="是否成交" width="80">
          <template #default="scope">
            <span v-if="scope.row.status == 1">已成交</span>
            <span v-if="scope.row.status == 0">未成交</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="100"></el-table-column>
        <el-table-column prop="money" label="返利金额" width="100"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
           <template #default="scope">
            <el-button type="primary" @click="change(scope)" v-if="realname == 'admin'">修改</el-button>
           </template>
        </el-table-column>

      </el-table>
    </div>

     <!-- 修改框 -->
    <el-dialog title="修改" :visible.sync="changeShow">
      <el-form
        ref="dataAddForm"
        :model="form"
        label-width="80px">
          <el-form-item label="备注信息">
            <el-input v-model="form.remarks" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="成交金额">
            <el-input v-model="form.money" placeholder="请输入金额"></el-input>
          </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeShow = false">取 消</el-button>
          <el-button type="primary" @click="changeStatus()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="pageIndex"
        :page-sizes="pageTotal"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination> -->
    <!-- </div> -->
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "relation",
  data() {
    return {
      type: "",
      name: "",
      date: "",
      total:'',
      changeShow:false,
      // handleSizeChange:'',
      size:'',
      tableData: [],
      pageTotal: 0, //总共有多少数据
      pageIndex: 1, //当前在第几页
      form:{
        aphone:null,//推荐人电话
        bphone:null,//被推荐人电话
        companyName:'',//公司名称
        realname:'',//真实姓名、客户名称
        email:'',//邮箱
        product:'',//产品,
        status:'',//是否成交，0是未成交，1是成交
        createTime:'',//创建时间
        remarks:'',//备注
        money:'',//金额
      },
      options: [{
          value: '0',
          label: '未成交'
        }, {
          value: '1',
          label: '已成交'
        }],
      value: null,
      realname:'',
      clientSum:0,
      clientSucces:0,
    };
  },
  created() {
    this.getList()
    this.realname = localStorage.getItem("realname")
  },
  watch:{
    aphone(){
      if(this.form.aphone == ""){
        this.form.aphone==null}
      },
    bphone(){
      if(this.form.bphone == ""){
        this.form.bphone==null
      }
    }
  },
  methods: {
      // handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      // },
      // handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      // },
    //分页导航
    handlePageChange(val) {
      this.page = val;
      this.getList();
    },
    //展示和搜索
    getList(){
      let params = {
        aphone:this.form.aphone,
        bphone:this.form.bphone,
        status:this.value,
      }
      axios
      .post("http://47.108.58.38/tk/user/dayAndmoney")
      .then(res =>{
        this.days = res.data.data.day
        this.clientSum = res.data.data.clientSum//推广客户数
        this.clientSucces = res.data.data.clientSucces//成交客户数
      })
      axios
      .post("http://47.108.58.38/tk/recommend/list",params)
      .then(res => {
        // console.log(res.data)
        this.tableData = res.data.data
        this.total = res.data.total
        this.size = res.data.size
        this.currentPage = res.data.currentPage
      })
      .catch(err => {
        this.$message.error(err.data.message)
      })
    },
    //搜索
    search(){
      this.getList()
    },
    //清空搜索
    reset(){
      this.form.aphone =null
      this.form.bphone = null
      this.value = null
      this.getList()
    },
    //修改
    change(row){
       this.changeShow = true
      this.form.id = row.row.id;
      this.form.status = row.row.status;
      // this.form.money = row.row.money;
      // this.form.remarks = row.row.remarks;
    },
    //成交
    changeStatus(){
      if(this.form.status == 0){
          this.form.status = 1
      }else if(this.form.status == 1){
         this.form.status = 0
      };
      let params = {
        id:this.form.id,
        status:this.form.status,
        remarks:this.form.remarks,
        money:this.form.money,
      }
      console.log(this.form.status)
      axios
      .post("http://47.108.58.38/tk/recommend/update",params)
      .then(res => {
        if(res.data.statusCode == "00000"){
          this.$message.success("更改成功！")
          }else{
           this.$message.error("更改失败！") 
          }
      })
      .catch(err => {
        this.$message.error(err.data.message)
      })
      this.changeShow = false
      this.getList()
    },
    
  }
};
</script>

<style scoped lang="less">
.relation {
  width: 100%;
  .tips {
    border: 1px solid rgb(0, 193, 222);
    font-size: 14px;
    padding: 5px 20px;
    color: rgb(119, 127, 132);
    background-color: rgb(239, 240, 252);
    i {
      margin-right: 5px;
    }
  }
  .search {
    margin-top: 20px;
    display: flex;
    .date,
    .searchBtn {
      margin-left: 20px;
    }
    /deep/ .el-select {
      width: 150px;
    }
  }
  .nums {
    width: 100%;
    padding: 5px 20px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 20px;
    height: 50px;
    border-bottom: none;
    p {
      font-size: 14px;
      color: rgb(119, 127, 132);
      em {
        font-size: 20px;
        font-weight: 600;
      }
    }
    .buy {
      margin-left: 50px;
    }
  }
  .table {
    width: 100%;
    /deep/ .el-table{
      border: 1px solid #ccc;
      /deep/ .has-gutter tr th{
        // background: #f00;
        background: rgb(245,245,246) !important;
      }
    }
  }
  .pagination{
    width: 100%;
    height: 60px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing:border-box;
    border-top: none;
  }
}
</style>
